<template>
  <div style="height:100%;position:relative;">
    <div :id="id" style="height: 100%" :style="{visibility:data&&data.length>0?'visible':'hidden'}"></div>
    <div v-show="!data||data.length===0" class="no-data">暂无数据</div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "pie",
  props: {
    id: {
      type: String,
      default: "pie",
    },
    color: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    total: 0,
  },
  watch: {
    data: {
      deep: true,
      handler() {
        if (this.chart) {
          this.setOption();
        } else {
          this.initChart();
        }
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id), "macarons");

      this.setOption();

      window.addEventListener("resize", () => {
        this.chart && this.chart.resize();
      });
    },
    setOption() {
      if (!this.data || Object.keys(this.data).length === 0) {
        return;
      }

      let legendData = this.data.map((item) => {
        return item.name;
      });
      let data = this.data.map((item) => {
        return { name: item.name, value: item.count };
      });

      let option = {
        color: this.color,
        tooltip: {
          trigger: "item",
          borderWidth: 0,
          backgroundColor: "rgba(50, 50, 50, 0.7)",
          textStyle: {
            color: "#ffffff",
          },
        },
        series: [
          {
            type: "pie",
            top: 10,
            bottom: 10,
            minAngle: 10,
            hoverAnimation: true,
            label: {
              alignTo: 'labelLine',
              show: true,
              color: "#82A9EF",
              formatter: function (params) {
                console.log(params, 'label-------')
                return [params.name, "{number|" + params.value
                 + "}"].join(
                  "\n"
                );
              },
              rich: {
                number: {
                  color: "#ffffff",
                  padding: [5, 0, 0, 0],
                },
              },
            },
            labelLayout: (params) => {
              let isLeft = params.labelRect.x < this.chart.getWidth() / 2;
              let points = params.labelLinePoints;
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width;
              return {
                labelLinePoints: points,
              };
            },
            data: data,
          },
        ],
      };

      this.chart.setOption(option, true);
    },
  },
};
</script>

<style lang="less" scoped>
.no-data {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5c8ce;
}
</style>